<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      class="tabel-form"
      label-width="80px"
    >
      <div style>
        <div>
          <el-form-item label="用户UID">
            <el-input
              v-model="queryParams.userRandomId"
              placeholder="请输入用户UID"
              clearable
              style="width: 180px;margin-right:20px;"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="用户名">
            <el-input
              v-model="queryParams.userAccount"
              placeholder="请输入用户名"
              clearable
              style="width: 180px;margin-right:20px;"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item label="昵称">
            <el-input
              v-model="queryParams.nickName"
              placeholder="请输入昵称"
              clearable
              style="width: 180px;margin-right:20px;"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="注册IP">
            <el-input
              v-model="queryParams.registerIp"
              placeholder="请输入注册IP"
              clearable
              style="width: 180px;margin-right:20px;"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="上级查询">
            <el-input
              v-model="queryParams.superior"
              placeholder="请输入用户UID"
              clearable
              style="width: 180px;margin-right:20px;"
              @keyup.enter.native="handleQuery"
              :disabled="disabled"
            />
          </el-form-item>
          <el-form-item label="代理查询">
            <el-input
              v-model="queryParams.agentName"
              placeholder="请输入代理查询"
              clearable
              style="width: 180px;margin-right:20px;"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="queryParams.phone"
              placeholder="输入手机号"
              clearable
              style="width: 180px;margin-right:20px;"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input
              v-model="queryParams.mail"
              placeholder="输入邮箱"
              clearable
              style="width: 180px;margin-right:20px;"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="邀请码">
            <el-input
              v-model="queryParams.inviteCode"
              placeholder="输入邀请码"
              clearable
              style="width: 180px;margin-right:20px;"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="用户直推" style="margin-right: 40px;">
            <el-input
              v-model="queryParams.userDirectPush"
              placeholder="输入用户名"
              clearable
              style="width: 180px;margin-right:20px;"
              @keyup.enter.native="handleQuery"
              @input="change1"
            />
            <!--            <el-select v-model="queryParams.userDirectPush" style="width: 180px;" @change="change1">-->
            <!--              <el-option v-for="item in pushUserList" :key="item.id" :label="item.name" :value="item.id">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
          </el-form-item>
          <el-form-item label="用户伞下" style="margin-right: 30px;">
            <el-input
              v-model="queryParams.userUnderUmbrella"
              placeholder="输入用户伞下"
              clearable
              style="width: 180px;margin-right:20px;"
              @keyup.enter.native="handleQuery"
              @input="change2"
            />
            <!--            <el-select v-model="queryParams.userUnderUmbrella" style="width: 180px;" @change="change2">-->
            <!--              <el-option v-for="item in sanxiaList" :key="item.id" :label="item.name" :value="item.id">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
          </el-form-item>
          <el-form-item label="用户三代" style="margin-right: 30px;">
            <el-input
              v-model="queryParams.user3rdGeneration"
              placeholder="输入用户三代"
              clearable
              style="width: 180px;margin-right:20px;"
              @keyup.enter.native="handleQuery"
              @input="change3"
            />
            <!--            <el-select v-model="queryParams.user3rdGeneration" style="width: 180px;" @change="change3">-->
            <!--              <el-option v-for="item in userSandai" :key="item.id" :label="item.name" :value="item.id">-->
            <!--              </el-option>-->
            <!--            </el-select>-->
          </el-form-item>
          <el-form-item label="钱包地址">
            <el-input
              v-model="queryParams.walletAddress"
              placeholder="输入钱包地址"
              clearable
              style="width: 180px;margin-right:20px;"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="是否充值" style="margin-right: 40px;">
            <el-select v-model="queryParams.isRecharge" clearable style="width: 180px;">
              <el-option
                v-for="item in isTopupList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="店铺状态" prop="userLevel" style="margin-right: 30px">
            <el-select v-model="queryParams.state" placeholder="请输入用户状态" style="width: 180px;">
              <el-option
                v-for="item in userStateList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="用户等级" prop="userLevel" style="margin-right: 30px">
            <el-select v-model="queryParams.userLevel" placeholder="请输入用户等级" style="width: 180px;">
              <el-option
                v-for="item in userLevel"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户类型" prop="userLevel" style="margin-right: 30px">
            <el-select
              v-model="queryParams.virtualUsers"
              placeholder="请输入用户状态"
              style="width: 180px;"
            >
              <el-option
                v-for="item in virtualUsersList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="余额" style="margin-right: 20px;">
            <el-input
              v-model="queryParams.lowerBalance"
              placeholder="余额范围下限"
              clearable
              style="width: 130px;"
            />
            <span>到</span>
            <el-input
              v-model="queryParams.upperBalance"
              placeholder="余额范围上限"
              clearable
              style="width: 130px;"
            />
          </el-form-item>
          <el-form-item prop="userName" label="注册时间" style="margin-left: 30px">
            <timeConvert @time-range-selected="timeRange" ref="payTime"></timeConvert>
          </el-form-item>
          <!--          <el-form-item label="会员层级" prop="storey" style="margin-right: 30px">
            <el-select v-model="queryParams.storey" placeholder="请输入会员层级" style="width: 180px;">
              <el-option v-for="item in storeyList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>-->
        </div>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜 索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重 置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!--    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['user:list:add']"
        >新增
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>-->

    <el-table :show-overflow-tooltip="true" v-loading="loading" :data="listList" border>
      <el-table-column label="用户列表" align="left" :min-width="220" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>
            <div>
              <span>用户UID：</span>
              {{ scope.row.userRandomId }}
            </div>
            <div>
              <span>用户名：</span>
              {{ scope.row.userAccount }}
            </div>
            <div>
              <span>昵称：</span>
              {{scope.row.nickName}}
            </div>
            <div>
              <span>会员层级：</span>
              <span>{{ scope.row.storey }}</span>
            </div>
            <div>
              <span>用户等级：</span>
              <span>{{ scope.row.userLevel }}</span>
            </div>
            <div>
              <span>代理名称：</span>
              <span>{{ scope.row.agentName }}</span>
            </div>
            <div>
              <span>上级ID：</span>
              <span>{{ scope.row.superiorId }}</span>
            </div>
          </span>
        </template>
      </el-table-column>

      <el-table-column label="团队新增/过期" align="left" :min-width="220" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>
            <div>
              <span>团队充提差：</span>
              <span>{{ '$' + $yun.formatAmount(scope.row.teamDifference) }}</span>
            </div>
            <div>
              <span>团队待审核提现：</span>
              <span>{{ '$' + $yun.formatAmount(scope.row.waitWithdrawal) }}</span>
            </div>
            <div>
              <span>代理名称：</span>
              <span>{{ scope.row.agentName }}</span>
            </div>
            <div>
              <span>已过期人数：</span>
              <span>{{ scope.row.expireNumber || 0 }}</span>
            </div>
            <div>
              <span>30天新增人数：</span>
              <span>{{ scope.row.recentAdd }}</span>
            </div>
            <div>
              <span>30天过期人数：</span>
              <span>{{ scope.row.expireRecent }}</span>
            </div>
          </span>
        </template>
      </el-table-column>

      <!--      <el-table-column label="代理信息" align="left" :min-width="180" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>
            <div>
              <span>上级账号：</span>
              <span>{{ scope.row.superior }}</span>
            </div>
            <div>
              <span>代理名称：</span>
              <span>{{ scope.row.agentName }}</span>
            </div>
            <div>
              <span>代理账号：</span>
              <span>{{ scope.row.agentAccount }}</span>
            </div>
            <div>
              <span>已过期数：</span>
               <span>{{ scope.row.expireNumber }}</span>
            </div>
            <div>
              <span>20天新增：</span>
               <span>{{ scope.row.recentAdd }}</span>
            </div>
          </span>
        </template>
      </el-table-column>-->
      <el-table-column label="下级人数" align="left" :min-width="150" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>
            <div>
              <span>直推人数：</span>
              <span>{{ scope.row.directNumber }}</span>
            </div>
            <div>
              <span>2代人数：</span>
              <span>{{ scope.row.twoNumber }}</span>
            </div>
            <div>
              <span>3代人数：</span>
              <span>{{ scope.row.threeNumber }}</span>
            </div>
            <div>
              <span>团队人数：</span>
              <span>{{ scope.row.num }}</span>
            </div>
            <div>
              <span>注册人数：</span>
              <span>{{ scope.row.registerNum }}</span>
            </div>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="金额信息" align="left" :min-width="200" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>余额：</span>
            <span
              :class="[{'red': scope.row.balance >= 5000},{'red': scope.row.balance <= 3}]"
            >{{ '$' + $yun.formatAmount(scope.row.balance) }}</span>
            <el-button
              style="margin-left: 10px"
              size="mini"
              type="text"
              plain
              @click="handleBalance(scope.row)"
            >修改余额</el-button>
          </div>
          <div>
            <span>代币：</span>
            <span>{{ scope.row.tokens }}</span>
          </div>
          <div>
            <span>充值金额：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.recharge) }}</span>
          </div>
          <div>
            <span>提现金额：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.withdrawal) }}</span>
          </div>
          <div>
            <span>充提差：</span>
            <span>{{ scope.row.difference }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="店铺信息" align="left" :min-width="190" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>店铺名称：</span>
            <span>{{ scope.row.shopName }}</span>
          </div>
          <div>
            <span>店铺等级：</span>
            <span>{{ scope.row.shopLevel }}</span>
          </div>
          <div>
            <span>店铺收益：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.shopIncome) }}</span>
          </div>
          <div>
            <span>店铺订单数量：</span>
            <span>{{ scope.row.shopOrderNum }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="主播信息" align="left" :min-width="190" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>主播礼物收益：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.anchorGiftIncome) }}</span>
          </div>
          <div>
            <span>主播订单收益：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.anchorOrderIncome) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="数量" align="left" :min-width="250" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>首充天数：</span>
            <span v-if="scope.row.firstChargeDay">{{ scope.row.firstChargeDay }}天</span>
            <span v-else>未充值</span>
          </div>
          <div>
            <span>充/提次数：</span>
            <span>{{ scope.row.rechargeNumber }} / {{ scope.row.withdrawalNumber }}</span>
          </div>
          <div>
            <span>同行为IP数：</span>
            <span>
              {{ scope.row.ipRegisterNumber }}
              <span
                v-show="scope.row.country"
              >{{ '(' + scope.row.country + ')' }}</span>
            </span>
          </div>
          <div>
            <span>是否充值：</span>
            <span>{{ scope.row.isRecharge == 1 ? '是' : '否' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="收益" align="left" :min-width="250" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>个人收益今日/累计：</span>

            <span>{{ '$' + $yun.formatAmount(scope.row.todayIncome) }} / {{ '$' + $yun.formatAmount(scope.row.cumulative) }}</span>
          </div>
          <div>
            <span>团队收益今日/累计：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.teamTodayIncome) }} / {{ '$' + $yun.formatAmount(scope.row.teamCumulative) }}</span>
          </div>
          <div>
            <span>1.2.3代复充/提现金额：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.rechargeAmount) }} / {{ '$' + $yun.formatAmount(scope.row.withdrawalAmount) }}</span>
          </div>
          <div>
            <span>团队复充/提现金额：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.teamRechargeAmount) }} / {{ '$' + $yun.formatAmount(scope.row.teamWithdrawalAmount) }}</span>
          </div>
          <div>
            <span>备注：</span>
            <span style="color:red;">{{ scope.row.notes }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="注册信息" align="left" :min-width="280" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>注册时间：</span>
            <span>{{ $yun.convertTimestamp(scope.row.registerTime) }}</span>
          </div>
          <div>
            <span>注册IP：</span>
            <span>{{ scope.row.registerIp }}</span>
          </div>
          <div>
            <span>最后操作IP：</span>
            <span>{{ scope.row.finalOperateIp }}</span>
          </div>
          <div>
            <span>最后操作时间：</span>
            <span>{{ $yun.convertTimestamp(scope.row.finalOperateTime) }}</span>
          </div>
          <div>
            <span>钱包地址：</span>
            <span>{{ scope.row.walletAddress }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="其他" align="left" :min-width="200" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>邀请码：</span>
            <span :class="{'quanxian':scope.row.inviteCode == 1}" style="padding-right: 10px">
              {{
              scope.row.inviteCode
              }}
            </span>
          </div>
          <div>
            <span>虚拟用户：</span>
            <span>{{ scope.row.virtualUsers == 0 ? '虚拟用户' : '正常用户' }}</span>
          </div>
          <div>
            <span>状态：</span>
            <span>{{ scope.row.state == 0 ? '正常' : '冻结' }}</span>
          </div>
          <div>
            <span>手机号区号：</span>
            <span>{{ phoneSpli(scope.row.phone,'left') }}</span>
          </div>
          <div>
            <span>手机号：</span>
            <span>{{ phoneSpli(scope.row.phone,'right') }}</span>
          </div>
          <div>
            <span>邮箱：</span>
            <span>{{ scope.row.mail }}</span>
          </div>
          <!--          <div style="display: flex;align-items: center;">
            <div style="margin-right: 10px;">
              <span>锁定：</span>
              <span>{{ scope.row.lockState == 0 ? '未锁定' : '已锁定' }}</span>
            </div>
          </div>-->
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('operate')"
        align="left"
        class-name="max-operate-tab"
        width="330"
        fixed="right"
      >
        <template slot-scope="scope">
          <div>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['user:list:edit']"
            >{{ $t('edit') }}</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['user:list:remove']"
            >{{ $t('delete') }}</el-button>
            <el-button size="mini" type="text" icon="el-icon-date" @click="NotesEdit(scope.row)">备注</el-button>

            <!--            <el-button
              size="mini"
              type="text"
              icon="el-icon-money"
              @click="$router.push({ path: '/user/fund', query: { userId:scope.row.userId } });"
              v-hasPermi="['user:list:remove']"
            >用户资金
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-shopping-bag-2"
              @click="$router.push({ path: '/user/rechargeHistory', query: { id:scope.row.userId } });"
              v-hasPermi="['user:list:remove']"
            >充值记录
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-sold-out"
              @click="$router.push({ path: '/user/withdrawalsHistory', query: { id:scope.row.userId } })"
              v-hasPermi="['user:list:remove']"
            >提现记录
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-shopping-cart-2"
              @click="$router.push(`/order/list?id=${scope.row.id}`)"
              v-hasPermi="['user:list:remove']"
            >订单数据
            </el-button>-->
            <el-button
              size="mini"
              type="text"
              icon="el-icon-setting"
              @click="limitBtn(scope.row.userId)"
              v-hasPermi="['user:list:remove']"
            >设置权限</el-button>
            <el-button size="mini" type="text" icon="el-icon-coin" @click="$yun.handleTodo">代币兑换记录</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-s-promotion"
              @click="$router.push({ path: '/user/userAddress', query: { id: scope.row.userId, userName:scope.row.userAccount} })"
            >添加地址</el-button>
          </div>
          <el-dropdown
            size="mini"
            @command="(command) => handleCommand(command, scope.row)"
            v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']"
          >
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleFund">用户资金</el-dropdown-item>
              <el-dropdown-item command="handleRecharge">充值记录</el-dropdown-item>
              <el-dropdown-item command="handleWithdrawal">提现记录</el-dropdown-item>
              <el-dropdown-item command="handleOrder">订单数据</el-dropdown-item>
              <el-dropdown-item
                v-if="dict.type.user_source && dict.type.user_source.length && scope.row.source == dict.type.user_source[0].value"
                command="setWater"
              >设置水军</el-dropdown-item>
              <!--              <el-dropdown-item v-else command="cancelWater">取消为水军</el-dropdown-item>-->
              <el-dropdown-item command="handleAmount">修改余额</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改用户列表对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item
          label="昵称"
          prop="nickName"
          :rules="[{required:true,message:'昵称不能为空',trigger:['blur','change']}]"
        >
          <el-input
            class="modal-input"
            v-model="form.nickName"
            placeholder="请输入昵称"
            :disabled="!input1"
          />
          <el-button type="text" v-show="!input1" @click="input1 =true">修改</el-button>
          <el-button
            type="text"
            v-show="input1"
            @click="submitForm1({userId:form.userId,userValue:form.nickName,type:1})"
          >确认</el-button>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input
            class="modal-input"
            v-model="form.loginPassword"
            placeholder="请输入需要修改的登录密码"
            :disabled="!input2"
          />
          <el-button type="text" v-show="!input2" @click="input2 =true">修改</el-button>
          <el-button
            type="text"
            v-show="input2"
            @click="submitForm2({userId:form.userId,userValue:form.loginPassword,type:2})"
          >确认</el-button>
        </el-form-item>
        <el-form-item label="支付密码" prop>
          <el-input
            class="modal-input"
            v-model="form.payPassword"
            placeholder="请输入需要修改支付密码"
            :disabled="!input3"
          />
          <el-button type="text" v-show="!input3" @click="input3 =true">修改</el-button>
          <el-button
            type="text"
            v-show="input3"
            @click="submitForm3({userId:form.userId,userValue:form.payPassword,type:3})"
          >确认</el-button>
        </el-form-item>
        <el-form-item label="用户等级" prop="userLevelId">
          <el-select
            class="modal-input"
            v-model="form.userLevelName"
            @change="changeLevel"
            :disabled="!input4"
          >
            <el-option
              class="modal-input"
              v-for="(item, index) in userLevelList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-button type="text" v-show="!input4" @click="input4 =true">修改</el-button>
          <el-button
            type="text"
            v-show="input4"
            @click="submitForm4({userId:form.userId,userValue:form.userLevelName,type:4})"
          >确认</el-button>
        </el-form-item>
        <el-row>
          <el-col :span="12" v-for="(itemAddress,index) in form.address" :key="itemAddress.id">
            <el-form-item :label="'用户地址'+(index+1)" prop="address">
              <el-input class="modal-input" v-model="itemAddress.address" placeholder="修改用户地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-for="(itemBank,index) in form.bankCard" :key="itemBank.id">
          <el-col :span="8">
            <el-form-item :label="'银行卡号'+(index+1)" prop="cardNumber">
              <el-input class="modal-input" v-model="itemBank.cardNumber" placeholder="修改银行卡" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="'开户行'+(index+1)" prop="address">
              <el-input class="modal-input" v-model="itemBank.address" placeholder="修改" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="'银行卡'+(index+1)+'户名'" prop="address">
              <el-input class="modal-input" v-model="itemBank.address" placeholder="修改" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="钱包地址" v-if="form.purse">
          <el-radio-group v-model="purse">
            <el-radio label="1">TRC20</el-radio>
            <el-radio label="2" disabled>ERC20(暂不开放)</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--        <el-form-item prop="purse" v-if="form.purse">
          <el-input class="modal-input" v-model="form.purse" placeholder="请输入"/>
        </el-form-item>-->
        <el-form-item label="头像" prop="userAvatar">
          <ImageUpload :limit="1" v-model="form.userAvatar"></ImageUpload>
          <el-button
            type="text"
            @click="submitForm5({userId:form.userId,userValue:form.userAvatar,type:5})"
            v-show="input5"
          >修改</el-button>
        </el-form-item>
        <!--        <el-divider></el-divider>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="cancel">确定</el-button> -->
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
    <!--    修改余额-->
    <el-dialog
      title="修改余额"
      :visible.sync="openChangeBalance"
      width="500px"
      append-to-body
      @close="$refs.formBalance.resetFields()"
    >
      <el-form ref="formBalance" :model="formBalance" :rules="rulesCategory">
        <el-form-item label="类型">
          <el-radio v-model="formBalance.category" label="gf">充值</el-radio>
          <el-radio v-model="formBalance.category" label="de">扣费</el-radio>
        </el-form-item>
        <el-form-item label="金额" prop="amountIncurred">
          <el-input v-model="formBalance.amountIncurred" type="number" :min="0" placeholder="请输入金额"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="text" v-model="formBalance.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormBalance">确定</el-button>
        <el-button @click="cancelFormBalance">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="用户资金" :visible.sync="fundOpen" width="700px" append-to-body>
      <el-descriptions>
        <el-descriptions-item label="用户ID" span="3">{{ userFundInfo.id }}</el-descriptions-item>
        <el-descriptions-item label="用户名" span="3">{{ userFundInfo.userName }}</el-descriptions-item>
        <el-descriptions-item label="余额" span="3">{{ userFundInfo.balance }}</el-descriptions-item>
        <el-descriptions-item label="礼物收益" span="3">{{ userFundInfo.giftIncome }}</el-descriptions-item>
        <el-descriptions-item label="订单收益" span="3">{{ userFundInfo.orderIncome }}</el-descriptions-item>
        <el-descriptions-item label="后台余额增加" span="3">{{ userFundInfo.systemIncrease }}</el-descriptions-item>
        <el-descriptions-item label="代理金额" span="3">{{ userFundInfo.agencyIncome }}</el-descriptions-item>
        <el-descriptions-item label="总充值金额" span="3">{{ userFundInfo.rechargeIncome }}</el-descriptions-item>
        <el-descriptions-item label="总提现金额" span="3">{{ userFundInfo.withdrawCash }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!-- 权限管理 -->
    <el-dialog
      :close-on-click-modal="false"
      title="权限管理"
      :visible.sync="open1"
      width="600px"
      append-to-body
    >
      <el-form label-position="left" ref="formPopTi" :model="limitObj" label-width="130px">
        <div style="display: flex;flex-wrap: wrap;justify-content: space-between;margin: 0 30px;">
          <el-form-item :label="item.limitName" v-for="item in userLimitList" :key="item.diyName">
            <el-switch
              v-model="item.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
              @change="handleStatusChange(item.id)"
            />
          </el-form-item>
          <el-empty v-if="!userLimitList.length" description="暂无数据"></el-empty>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="open1 = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 修改渠道 -->
    <el-dialog
      :close-on-click-modal="false"
      title="修改渠道"
      :visible.sync="open2"
      width="600px"
      append-to-body
      @close="$refs['channelForm'].clearValidate()"
    >
      <el-form label-position="left" ref="channelForm" :model="channelObj" label-width="130px">
        <el-form-item label="用户名" prop="userName">
          <el-select v-model="channelObj.val" placeholder="请选择">
            <el-option
              v-for="item in channelUser"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入用户名"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open2 = false">关 闭</el-button>
        <el-button type="primary" @click>确 定</el-button>
      </div>
    </el-dialog>

    <!--    修改备注-->
    <el-dialog
      :close-on-click-modal="false"
      title="修改备注"
      :visible.sync="open3"
      width="600px"
      append-to-body
      @close="$refs['notesForm'].clearValidate()"
    >
      <el-form label-position="left" ref="notesForm" :model="notesObj" label-width="130px">
        <el-form-item label="用户名" prop="userName">
          <el-radio-group v-model="notesObj.type">
            <el-radio :label="0">个人</el-radio>
            <el-radio :label="1">团队</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input
            v-model="notesObj.notes"
            placeholder="请输入备注"
            @keyup.enter.native="handleQuery"
            :rules="{ required: true, message: '备注不能为空', trigger: 'blur' }"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open3 = false">关 闭</el-button>
        <el-button type="primary" @click="handleNotes">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addList,
  coLimit,
  country,
  delList,
  freezeUser,
  getList,
  levelAll,
  limitList,
  topUser,
  updateList, updateNotes,
  userinfoPage,
  waterArmyUser
} from '@/api/user/list'
import DictSelect from '@/components/DictSelect/index.vue'
import { balance, editFund } from '@/api/user/fund'
import { changeBalance } from '@/api/system/user'
import { userLevelList } from '@/api/setting/gradeRebate'
import { parseTime } from '../../../utils/ruoyi'
import { convertTimestamp } from "@/utils/yun"

export default {
  name: 'List',
  components: { DictSelect },
  dicts: ['user_type', 'block_protocols', 'user_source'],
  data () {
    return {
      userLevel: [],
      virtualUsersList: [{ id: 0, name: '虚拟用户' }, { id: 1, name: '正常用户' }],
      userStateList: [{ id: 0, name: '正常' }, { id: 1, name: '禁用' }],
      storeyList: [{ id: 1, name: '1层' }, { id: 2, name: '2层' }, { id: 3, name: '3层' }, { id: 4, name: '4层' }, { id: 5, name: '5层' }],
      //离线时间筛选可选项
      lastLoginTimeList: [{ label: '离线1天', value: 1 }, { label: '离线3天', value: 3 }, {
        label: '离线7天',
        value: 7
      }, { label: '离线15天', value: 15 }],
      //用户资金面板状态
      fundOpen: false,
      userFundInfo: {},
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户列表表格数据
      listList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      open1: false,
      open2: false,
      open3: false,
      // 查询参数
      queryParams: {
        state: null,
        virtualUsers: null,
        pageNum: 1,
        pageSize: 10,
        userType: null,
        userName: null,
        userDirectPush: null,
        userUnderUmbrella: null,
        user3rdGeneration: null,
        userRandomId: null,
        userAccount: null,
        id: this.$route.params.id !== ':id' ? this.$route.params.id : null
      },
      disabled: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        mobile: {
          required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          message: '请输入正确的手机号码',
          trigger: 'blur'
        },
        payPassword: {
          required: true,
          pattern: /^\d{6}$/,
          message: '请正确输入6位数字密码',
          trigger: 'blur'
        },
        avatar: [
          { required: true, message: '请上传用户头像', trigger: ['change', 'blur'] }
        ]
      },
      rulesCategory: {
        amountIncurred: [{ required: true, message: '金额不能为空', trigger: 'blur' }],
        remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
      },
      openChangeBalance: false,
      //修改金額表單
      formBalance: {
        category: 'gf',
        amountIncurred: '',
        remark: ''
      },
      //   可选国家
      countryList: [],
      // 查询参数
      queryParamsCountry: {
        page: {
          current: 1,
          size: 10
        }
      },
      //用户等级列表
      userLevelList: [],
      purse: '1',
      limitObj: {},
      userLimitList: [],
      //是否充值列表
      isTopupList: [{ id: 1, name: '是' }, { id: 2, name: '否' }],
      // 用户伞下
      /*      sanxiaList: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
            // 用户三代
            userSandai: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
            //用户直推
            pushUserList: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],*/
      // 判断权限 1个人 2 下级
      limits: null,
      // 渠道用户
      channelUser: [],
      channelObj: {},

      // 备注
      notesObj: {},
      input1: false,
      input2: false,
      input3: false,
      input4: false,
      input5: false,
      formClone: {},
    }
  },
  watch: {
    'form.userAvatar': {
      handler (newData, oldData) {
        if (newData != this.formClone.userAvatar) {
          this.input5 = true
        } else {
          this.input5 = false
        }
      },
      immediate: false,
    }
  },
  created () {
    if (this.$route.query.userName) {
      this.queryParams.userAccount = this.$route.query.userName
    }
    this.getList()
    this.getCountryList()
    this.getUserLevelList()
    levelAll(this.queryParams).then(res => {
      this.userLevel = res.data
    })
  },
  methods: {
    submitForm1 (params) {
      updateList(params).then(response => {
        this.$modal.msgSuccess('修改成功')
        this.open = false
        this.input2 = false
        this.input3 = false
        this.input4 = false
        this.input5 = false
        this.input1 = false
        this.getList()
      })
    },
    submitForm2 (params) {
      updateList(params).then(response => {
        this.$modal.msgSuccess('修改成功')
        this.open = false
        this.input2 = false
        this.input3 = false
        this.input4 = false
        this.input5 = false
        this.input1 = false
        this.getList()
      })
    },
    submitForm3 (params) {
      updateList(params).then(response => {
        this.$modal.msgSuccess('修改成功')
        this.open = false
        this.input2 = false
        this.input3 = false
        this.input4 = false
        this.input5 = false
        this.input1 = false
        this.getList()
      })
    },
    submitForm4 (params) {
      updateList(params).then(response => {
        this.$modal.msgSuccess('修改成功')
        this.open = false
        this.input2 = false
        this.input3 = false
        this.input4 = false
        this.input5 = false
        this.input1 = false
        this.getList()
      })
    },
    submitForm5 (params) {
      updateList(params).then(response => {
        this.$modal.msgSuccess('修改成功')
        this.open = false
        this.input2 = false
        this.input3 = false
        this.input4 = false
        this.input5 = false
        this.input1 = false
        this.getList()
      })
    },
    changeInput1 (e) {
      console.log(e, this.form.nickName)
      if (this.formClone.nickName != e && e.length > 0) {
        this.input1 = true
      } else {
        this.input1 = false
      }
    },
    changeInput2 (e) {
      if (this.formClone.loginPassword != e && e.length > 0) {
        this.input2 = true
      } else {
        this.input2 = false
      }
    },
    changeInput3 (e) {
      if (this.formClone.payPassword != e && e.length > 0) {
        this.input3 = true
      } else {
        this.input3 = false
      }
    },
    convertTimestamp,
    parseTime,
    // 修改权限状态
    handleStatusChange (id) {
      coLimit(id).then(res => {
        if (res.success) {
          this.getList()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 修改渠道
    channel () {
      this.open2 = true
    },
    // 改变用户等级
    changeLevel (e) {
      if (Number(this.formClone.userLevelId) != e) {
        this.input4 = true
      } else {
        this.input4 = false
      }
    },
    // 获取权限列表
    limitBtn (id) {
      let obj = {
        userId: id,
        type: 1
      }
      limitList(obj).then(res => {
        this.userLimitList = res.data
        this.open1 = true
      })
    },
    /** 查询可选国家列表 */
    getCountryList () {
      country(this.queryParamsCountry).then(response => {
        this.countryList = response.data.records
      })
    },
    /** 查询用户列表列表 */
    getList () {
      this.loading = true
      this.$yun.removeEmptyValues(this.queryParams)
      userinfoPage(this.queryParams).then(response => {
        this.listList = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    }, /** 查询用户等级列表 */
    getUserLevelList () {
      userLevelList().then(response => {
        this.userLevelList = response.data
      })
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.input2 = false
      this.input3 = false
      this.input4 = false
      this.input5 = false
      this.input1 = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.form = {
        'userId': null,
        'userAvatar': null,
        'userName': null,
        'nickName': null,
        'loginPassword': null,
        // 'loginPassword': null,
        'payPassword': null,
        'areaCode': null,
        'phoneNum': null,
        'userLevelId': null,
        'userLevelName': null,
        'mail': null,
        'bankCard': [],
        'address': [],
        'purse': null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1
      /*if(this.queryParams.userDirectPush !== null) this.queryParams.conditionType = 1
      if(this.queryParams.userUnderUmbrella !== null) this.queryParams.conditionType = 2
      if(this.queryParams.user3rdGeneration !== null) this.queryParams.conditionType = 3*/
      // if(this.queryParams.conditionType && !this.queryParams.userAccount) return this.$modal.msgError('请输入用户名')
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.$refs['payTime'].clear()
      this.disabled = false
      this.queryParams = {
        pageSize: 10,
        pageNum: 1,
        userDirectPush: null,
        userUnderUmbrella: null,
        user3rdGeneration: null,
        virtualUsers: null,
      }
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset()
      this.open = true
      this.title = '添加用户列表'
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      console.log(row)
      this.reset()
      const id = row.userId
      getList(id).then(response => {
        this.form = response.data
        this.formClone = { ...this.form }
        console.log('this.form', this.form)
        this.open = true
        this.title = this.$t('edit') + '用户信息'
      })
    },
    /** 提交按钮 */
    submitForm () {
      console.log(this.$refs['form'])
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.loginPassword = this.form.loginPassword || this.form.loginPassword
          this.form.payPassword = this.form.payPassword || this.form.payPassword
          if (this.form.userId != null) {
            updateList(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addList(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const ids = row.id || this.ids
      this.$modal.confirm(this.$t('delete-or-not')).then(function () {
        return delList(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess(this.$t('delete-success'))
      }).catch(() => {
      })
    },
    NotesEdit (row) {
      let obj = {
        userId: row.userId,
        notes: row.notes
      }
      this.notesObj = { ...obj }
      if (!this.notesObj.type) this.notesObj.type = 0
      this.open3 = true
    },
    //是否置顶
    async top (row) {
      await topUser(row.id, row.top)
      this.$modal.msgSuccess('设置成功')
      this.getList()
    },
    //设置水军
    async handleWater (id) {
      await waterArmyUser(id)
      this.$modal.msgSuccess('设置成功')
      this.getList()
    },
    //更改余额
    async handleAmount (row) {
      this.openChangeBalance = true
      this.handleBalance(row)
      /* this.$prompt(null, this.$t('edit') + '余额', {
        confirmButtonText: this.$t('ok'),
        cancelButtonText: this.$t('cancel'),
        inputValue: row.amount,
        inputType: 'number',
      }).then(async({ value }) => {
        await balance({
          userId:row.id,
          changeAmount: value
        })
        this.$modal.msgSuccess('修改成功')
        this.getList()
      }) */
    },
    // 更多操作触发
    async handleCommand (command, row) {
      switch (command) {
        case 'handleFund':
          /*  const rsp = await listFund({id: row.id, pageNum: 1, pageSize: 1})
           const data = rsp.data.records[0]
           this.userFundInfo = data || {};
           this.fundOpen = true */
          this.$router.push({ path: '/user/fund/:id', query: { userName: row.userAccount } })
          break
        case 'setWater':
          this.handleWater(row.id)
          break
        case 'cancelWater':
          this.handleWater(row.id)
          break
        case 'handleAmount':
          this.handleAmount(row)
          break
        case 'handleRecharge':
          this.$router.push({ path: '/user/rechargeHistory', query: { id: row.userId } })
          break
        case 'handleWithdrawal':
          this.$router.push({ path: '/user/withdrawalsHistory', query: { id: row.userId } })
          break
        case 'handleOrder':
          this.$router.push({ path: '/order/list', query: { id: row.userId } })
          break
        default:
          break
      }
    },
    //修改余额
    handleBalance: function (row) {
      this.formBalance.userId = row.userId
      this.openChangeBalance = true
    },
    //提交余额表单
    submitFormBalance: function () {
      this.$refs.formBalance.validate(valid => {
        if (valid) {
          let obj = {
            changeAmount: this.formBalance.category == 'de' ? this.formBalance.amountIncurred * -1 : this.formBalance.amountIncurred,
            userId: this.formBalance.userId,
            remark: this.formBalance.remark
          }
          changeBalance(obj).then(request => {
            this.$modal.msgSuccess('修改成功')
            this.openChangeBalance = false
            this.getList()
          })
        }
      })
    },

    // 提交备注
    handleNotes () {
      this.$refs['notesForm'].validate(valid => {
        if (valid) {
          updateNotes(this.notesObj).then(res => {
            this.$modal.msgSuccess('修改成功')
            this.open3 = false
            this.getList()
          })
        }
      })

    },
    //取消更改余额
    cancelFormBalance: function () {
      this.resetBalanceForm()
      this.openChangeBalance = false
    },
    //重置余额表单
    resetBalanceForm () {
      this.$nextTick(() => {

      })
    },
    disableChange: function (row) {
      freezeUser(row.id).then(() => {
        this.getList()
        this.$modal.msgSuccess('修改成功')
      }).catch(() => {
      })
    },
    formattingTimer (row) {
      if (row && row.length === 6) {
        const formattedDate = new Date(row[0], row[1] - 1, row[2], row[3], row[4], row[5]).toLocaleString()
        return formattedDate
      } else {
      }
    },
    change1 (e) {
      if (this.queryParams.userDirectPush) {
        this.disabled = true
      } else {
        this.disabled = false
      }
      this.$set(this.queryParams, 'userUnderUmbrella', '')
      this.$set(this.queryParams, 'user3rdGeneration', '')
    },
    change2 (e) {
      if (this.queryParams.userUnderUmbrella) {
        this.disabled = true
      } else {
        this.disabled = false
      }
      this.$set(this.queryParams, 'userDirectPush', '')
      this.$set(this.queryParams, 'user3rdGeneration', '')
    },
    change3 (e) {
      if (this.queryParams.user3rdGeneration) {
        this.disabled = true
      } else {
        this.disabled = false
      }
      this.$set(this.queryParams, 'userDirectPush', '')
      this.$set(this.queryParams, 'userUnderUmbrella', '')
    },
    // 手机号和区号分割
    phoneSpli (num, type) {
      if (!num || !type) {
        return ''
      }
      let parts = num.split('-')
      if (type === 'left') {
        return parts[0]
      } else {
        return parts[1]
      }
    },
    timeRange (obj) {
      console.log(obj)
      this.queryParams.startTime = obj.startTime
      this.queryParams.endTime = obj.endTime
    },
  }
}
</script>

<style>
.red {
  color: red;
}
</style>
